<template>
  <div>
    <div class="search-box">
      <a-input
        @keydown.enter="search"
        v-model:value="name"
        class="search-input"
        placeholder="请输入书名"
        ><template v-slot:prefix><BookOutlined /></template
      ></a-input>
      <a-input
        @keydown.enter="search"
        v-model:value="author"
        class="search-input"
        placeholder="请输入作者"
        ><template v-slot:prefix><UserOutlined /></template
      ></a-input>
      <a-button type="primary" @click="search">搜索</a-button>
    </div>
    <div class="must" v-if="mustRecommend">
      <a-card hoverable style="width: 150px">
        <template #cover>
          <img
            alt="example"
            :src="$http.baseURL + '/public/pic/' + mustRecommend.welcome.cover"
          />
        </template>
        <a-card-meta title="最受欢迎书籍">
          <template #description>
            <div>{{ mustRecommend.welcome.name }}</div>
          </template>
        </a-card-meta>
      </a-card>
      <a-card hoverable style="width: 150px">
        <template #cover>
          <img
            alt="example"
            :src="
              $http.baseURL + '/public/pic/' + mustRecommend.recommended.cover
            "
          />
        </template>
        <a-card-meta title="新书推荐">
          <template #description>
            <div>{{ mustRecommend.recommended.name }}</div>
          </template>
        </a-card-meta>
      </a-card>
    </div>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template v-slot:cover="{ text }">
        <img
          class="book-img"
          :src="$http.baseURL + '/public/pic/' + text"
          alt=""
        />
      </template>
      <template v-slot:stock="{ text, record }">
        {{ record.stock }}/{{ record.total }}
      </template>
      <template v-slot:customTitle> <SmileOutlined /> 封面 </template>
      <template v-slot:action="{ text }">
        <a-button
          :disabled="
            text.stock === '0' || total === 5 || recordIds.includes(text.id)
          "
          type="primary"
          @click="addRecord(text)"
          >借阅</a-button
        >
        <a-button type="primary" @click="addRecommend(text)">推荐</a-button>
        <template v-if="$root.isAdmin">
          <a-button type="primary" @click="getRecord(text)">查看</a-button>
          <a-button @click="update(text)">修改</a-button>
          <!-- <a-button type="danger" @click="deleteBook(text)">删除</a-button> -->
        </template>
      </template>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: "cover",
    slots: { title: "customTitle", customRender: "cover" },
  },
  {
    title: "书名",
    dataIndex: "name",
  },
  {
    title: "作者",
    dataIndex: "author",
  },
  {
    title: "简介",
    dataIndex: "introduction",
  },
  {
    title: "出版社",
    dataIndex: "publisher",
  },
  {
    title: "最受欢迎指数",
    dataIndex: "recordNum",
  },
  {
    title: "价格",
    dataIndex: "price",
    width: 60,
  },
  {
    title: "库存",
    dataIndex: "stock",
    slots: { customRender: "stock" },
  },
  {
    title: "操作",
    slots: { customRender: "action" },
  },
];
export default {
  data() {
    return {
      data: [],
      name: "",
      author: "",
      total: 0,
      recordIds: [],
      columns,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      mustRecommend: null,
    };
  },
  methods: {
    addRecord(obj) {
      this.$http
        .get("/addRecord", {
          bookId: obj.id,
          book: obj.name,
          user: localStorage.username,
        })
        .then((_) => {
          this.$message.success(`借阅 ${obj.name} 成功`);
          this.search();
          this.getRecordId();
        });
    },
    addRecommend(obj) {
      this.$http
        .get("/addRecommend", {
          bookId: obj.id,
          book: obj.name,
          user: localStorage.username,
        })
        .then((_) => {
          this.$message.success(`推荐 ${obj.name} 成功`);
        });
    },
    getRecord(obj) {
      this.$router.push({ name: "record", params: { book: obj.name } });
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.search();
    },
    deleteBook(obj) {
      this.$confirm({
        title: `确认删除《${obj.name}》吗？`,
        content: "删除后不可恢复",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          this.$http.get("/deleteBook", { id: obj.id }).then((_) => {
            this.$message.success(`删除 ${obj.name} 成功`);
            this.search();
          });
        },
      });
    },
    update(obj) {
      this.$root.bookData = obj;
      this.$router.push("/add");
    },
    search() {
      var obj = {
        current: this.pagination.current,
        pageSize: this.pagination.pageSize,
      };
      if (this.name) {
        obj.name = this.name;
      }
      if (this.author) {
        obj.author = this.author;
      }
      this.$http.get("/search", obj).then((_) => {
        _.data.map((v) => {
          v.recordNum =
            ((v.recordNum / _.pa).toFixed(2) * 100).toFixed(0) +
            "%的同学都选择这本书哦";
        });
        this.data = _.data;
        this.pagination.total = _.total;
      });
    },
    getRecommend() {
      this.$http.get("/getRecommend").then((res) => {
        this.mustRecommend = res;
      });
    },
    getRecordId() {
      this.$http
        .get("/getRecordId", { user: localStorage.username })
        .then((_) => {
          this.recordIds = _.data;
          this.total = _.total;
        });
    },
  },
  created() {
    if (!localStorage.token) {
      return this.$router.push("/login");
    }
    this.search();
    this.getRecommend();
    this.getRecordId();
  },
};
</script>
<style>
.book-img {
  width: 80px;
}
.must {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
